import React from "react";
import { Color } from "../model/color";

interface Props {
    color: Color, // 颜色初始值
    onColorUpdated: (color: Color) => void
}
interface PropsColorSlider {
    value: number,
    onValueUpdated: (newValue: number) => void
}
// keyof  Color里的任一参数
const UpdateColor =
    (props: Props, colorId: keyof Color) =>
        (value: any) => {
            props.onColorUpdated({
                ...props.color,
                [colorId]: value
            })
        }
const ColorPicker: React.FC<Props> = (props) => {
    // UpdateColor(1,"red")
    return (
        <>
            <ColorSliderComponent 
                value={props.color.red}
                onValueUpdated={UpdateColor(props, "red")}
            />
            <br />
            <ColorSliderComponent 
                value={props.color.green}
                onValueUpdated={UpdateColor(props, "green")}
            />
            <br />
            <ColorSliderComponent 
                value={props.color.blue}
                onValueUpdated={UpdateColor(props, "blue")}
            />
        </>
    )
}
const ColorSliderComponent: React.FC<PropsColorSlider> = (props) => {
    return (
        <div>
            {/* range 区间之间 */}
            <input 
                type="range"
                min="0"
                max="255"
                value={props.value}
                // + 类型转换
                onChange={(event) => props.onValueUpdated(+event.target.value)}
            />
            {props.value}
        </div>
    )
}

export default ColorPicker